<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>您好Springboot</title>
	<script type="text/javascript" src="../js/jquery-3.4.1.min.js"></script>
	<script type="text/javascript">
		$(function(){
			//alert("ajax调用成功")
			//利用$.get方式获取数据列表
			$.get("/findAjax",function(data){
				console.log(data)
				for (let user of data){
					let id=user.id;
					let name=user.name;
					let age=user.age;
					let sex=user.sex;
					let tr = "<tr align='center'>" +
							"<td>"+id+"</td>" +
							"<td>"+name+"</td>" +
							"<td>"+age+"</td>" +
							"<td>"+sex+"</td></tr>"
					$("#table1").append(tr);
				}
			})


			//$.getJSON   $.load()加载html代码片段

			$.ajax({
				type : "get",
				url  : "/userAjax",
				async : true,  //默认是异步状态
				error: function(data){
					alert("当前服务器异常");
				},
				//data : {"id":100,"name":"tomcat"},
				data : "id=100&name=tomcat",
				success : function(data){
					let tr = '';
					for(let user of data){
						let id = user.id
						let name = user.name
						let age = user.age
						let sex = user.sex
						tr += "<tr align='center'><td>"+id+"</td><td>"+name+"</td><td>"+age+"</td><td>"+sex+"</td></tr>"
					}
					$("#tab1").append(tr)
				}
			});
		})


	</script>
</head>
<body>
	<table id="table1" border="1px" width="65%" align="center">
		<tr>
			<td colspan="6" align="center"><h3>学生信息</h3></td>
		</tr>
		<tr>
			<th>编号</th>
			<th>姓名</th>
			<th>年龄</th>
			<th>性别</th>
			<th>操作</th>
		</tr>

	</table>

</body>
</html>